<template>
    <div>
        <s-table ref="table" :search-params="searchParams" :columns="columnsAction" :async-fc="page">
            <template #tableHeader>
                <t-button @click="insert">新增信息</t-button>
            </template>
        </s-table>
        <t-dialog v-model:visible="modalOpen" width="80%" @confirm="onModalSubmit">
            <t-form ref="submitFormRef" :rules="rules" :data="submitForm">
                <t-row style="" :gutter="[16, 24]">
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.title')" name="title">
                            <t-input v-model="submitForm.title" :placeholder="t('pages.food.titlePlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.typeId')" name="typeId">
                            <t-select
                                v-model="submitForm.typeId"
                                clearable
                                :options="typeOptions"
                                :placeholder="t('pages.food.typeIdPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.imageUrls')" name="imageUrls">
                            <t-input
                                v-model="submitForm.imageUrls"
                                :placeholder="t('pages.food.imageUrlsPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.nutrient')" name="nutrient">
                            <t-input v-model="submitForm.nutrient" :placeholder="t('pages.food.nutrientPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.heat')" name="heat">
                            <t-input v-model="submitForm.heat" :placeholder="t('pages.food.heatPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.heat')" name="heat">
                            <t-input v-model="submitForm.heat" :placeholder="t('pages.food.heatPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.protein')" name="protein">
                            <t-input v-model="submitForm.protein" :placeholder="t('pages.food.proteinPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.fat')" name="fat">
                            <t-input v-model="submitForm.fat" :placeholder="t('pages.food.fatPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.carbonWater')" name="carbonWater">
                            <t-input
                                v-model="submitForm.carbonWater"
                                :placeholder="t('pages.food.carbonWaterPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.dietaryFiber')" name="dietaryFiber">
                            <t-input
                                v-model="submitForm.dietaryFiber"
                                :placeholder="t('pages.food.dietaryFiberPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.vitaminA')" name="vitaminA">
                            <t-input v-model="submitForm.vitaminA" :placeholder="t('pages.food.vitaminAPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.vitaminC')" name="vitaminC">
                            <t-input v-model="submitForm.vitaminC" :placeholder="t('pages.food.vitaminCPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.vitaminE')" name="vitaminE">
                            <t-input v-model="submitForm.vitaminE" :placeholder="t('pages.food.vitaminEPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.carrot')" name="carrot">
                            <t-input v-model="submitForm.carrot" :placeholder="t('pages.food.carrotPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.vitaminB1')" name="vitaminB1">
                            <t-input
                                v-model="submitForm.vitaminB1"
                                :placeholder="t('pages.food.vitaminB1Placeholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.vitaminB2')" name="vitaminB2">
                            <t-input
                                v-model="submitForm.vitaminB2"
                                :placeholder="t('pages.food.vitaminB2Placeholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.niacin')" name="niacin">
                            <t-input v-model="submitForm.niacin" :placeholder="t('pages.food.niacinPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.cholesterol')" name="cholesterol">
                            <t-input
                                v-model="submitForm.cholesterol"
                                :placeholder="t('pages.food.cholesterolPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.magnesium')" name="magnesium">
                            <t-input
                                v-model="submitForm.magnesium"
                                :placeholder="t('pages.food.magnesiumPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.iron')" name="iron">
                            <t-input v-model="submitForm.iron" :placeholder="t('pages.food.ironPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.calcium')" name="calcium">
                            <t-input v-model="submitForm.calcium" :placeholder="t('pages.food.calciumPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.zinc')" name="zinc">
                            <t-input v-model="submitForm.zinc" :placeholder="t('pages.food.zincPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.copper')" name="copper">
                            <t-input v-model="submitForm.copper" :placeholder="t('pages.food.copperPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.manganese')" name="manganese">
                            <t-input
                                v-model="submitForm.manganese"
                                :placeholder="t('pages.food.manganesePlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.potassium')" name="potassium">
                            <t-input
                                v-model="submitForm.potassium"
                                :placeholder="t('pages.food.potassiumPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.phosphorus')" name="phosphorus">
                            <t-input
                                v-model="submitForm.phosphorus"
                                :placeholder="t('pages.food.phosphorusPlaceholder')"
                            />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.sodium')" name="sodium">
                            <t-input v-model="submitForm.sodium" :placeholder="t('pages.food.sodiumPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.selenium')" name="selenium">
                            <t-input v-model="submitForm.selenium" :placeholder="t('pages.food.seleniumPlaceholder')" />
                        </t-form-item>
                    </t-col>
                    <t-col :span="3">
                        <t-form-item :label="t('pages.food.remarks')" name="remarks">
                            <t-input v-model="submitForm.remarks" :placeholder="t('pages.food.remarksPlaceholder')" />
                        </t-form-item>
                    </t-col>
                </t-row>
            </t-form>
        </t-dialog>
    </div>
</template>
<script setup lang="ts">
/** ***                                          引用部分开始                                          */
import type { FormInstanceFunctions } from 'tdesign-vue-next';
import { DialogPlugin, Link, MessagePlugin, Space } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';

import { deleteById, insertApi, page, updateApi } from '@/api/food';
import { getOptions } from '@/api/foodtype';
import STable from '@/components/s-table/index.vue';
import { t } from '@/locales';

import { columns, rules, searchParams } from './props/food';
/** ***                                          引用部分结束                                          */

/** ***                                          属性定义部分开始                                          */
const submitForm = ref({});
const modalOpen = ref(false);
const searchForm = ref(searchParams);
const typeOptions = ref([]);
const submitFormRef = ref<FormInstanceFunctions>(null);
const table = ref<STableInstanceFunction>(null);
/** ***                                          属性定义部分结束                                          */

const columnsAction = columns.concat([
    {
        align: 'left',
        fixed: 'right',
        colKey: 'op',
        title: t('components.commonTable.operation'),
        cell: (h, { row }) =>
            h(Space, {}, [
                h(
                    Link,
                    {
                        theme: 'primary',
                        onClick: () => {
                            submitForm.value = row;
                            modalOpen.value = true;
                        },
                    },
                    '修改',
                ),
                h(
                    Link,
                    {
                        theme: 'danger',
                        onClick: () => {
                            const confirmDialog = DialogPlugin.confirm({
                                header: `提示`,
                                body: `删除后，标记为${row.id}的所有信息将被清空，且无法恢复`,
                                confirmBtn: {
                                    content: '提交',
                                    theme: 'primary',
                                    loading: false,
                                },
                                theme: 'warning',
                                onConfirm: async () => {
                                    confirmDialog.update({ confirmBtn: { content: '提交中', loading: true } });
                                    await deleteById(row.id);
                                    MessagePlugin.success('删除成功！');
                                    table.value.onSearch();
                                    confirmDialog.update({ confirmBtn: { content: '提交', loading: false } });
                                    confirmDialog.hide();
                                },
                            });
                        },
                    },
                    '删除',
                ),
            ]),
    },
]);

/** ***                                          页面方法开始                                          */
const insert = () => {
    modalOpen.value = true;
    submitForm.value = {};
};

/**
 * 提交表单
 */
const onModalSubmit = async () => {
    const valid = await submitFormRef.value.validate();
    if (valid === true) {
        if (submitForm.value.id) {
            await updateApi(submitForm.value);
        } else {
            await insertApi(submitForm.value);
        }
        MessagePlugin.success('操作成功！');
        modalOpen.value = false;
        table.value.onSearch();
    }
};

onMounted(async () => {
    const data = await getOptions();
    typeOptions.value = data;
    searchForm.value = searchParams.concat([
        {
            label: t('pages.food.typeId'),
            key: 'typeId',
            valueType: 'select',
            options: data,
        },
    ]);
});
/** ***                                          页面方法结束                                          */
</script>
